<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="../vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
</head>

<body>
    <!-- 
        过滤器：
            定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
            语法：
                1、注册过滤器：
                    全局注册：Vue.filter(name,callback); 
                    局部注册：new Vue(filters:{});
                2、使用过滤器：{{ xxx | 过滤起名}} 或 v-bind：属性="xxx | 过滤器名"
            备注：
                1、过滤器可以接收额外参数、多个过滤器也可以串联
                2、过滤器并没有改变原本的数据，是产生新的对应数据
     -->
    <div id="root">
        <h1>显示格式化的世间</h1>
        <br>
        <h1>计算属性实现</h1> 
        <h2>现在是{{fmtTime}}</h2>
        <h1>methods实现</h1>
        <h2>现在是{{getfmtTime()}}</h2>
        <h1>过滤器实现</h1>
        <h2>现在是{{time | timeFormater}}</h2>
        <h2>现在是{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h2>
        <h3 :x="msg | mySlice">黑马程序员</h3>
        <!-- 报错 -->
        <!-- <input type="text" v-model="msg | Slice"> -->

    </div>
    <div id="root2">{{msg | Slice}}</div>
    <script>
        
        Vue.config.productionTip=false;
        //全局过滤器
        Vue.filter('Slice',value => value.slice(3,20))
        new Vue({ 
            el: '#root',
            data: {
                time:Date.now(),
                msg:'你好，黑马程序员'
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                },
            },
            methods: {
                getfmtTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            //局部过滤器
            filters:{
                timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                mySlice(value){
                    return value.slice(5,20)
                },
            }
        })

        new Vue({ 
            el: '#root2',
            data: {
                msg:'hi,黑马程序员！',
            }
        })
    </script>
</body>

</html>